<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部仪表</title>
    <!-- 引入element样式 -->
    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css">-->
    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/allCounter.css"></head>
</head>
<body>
    <div id="app" class="app">
        <el-row>
            <el-col :span="24" style="line-height: 40px">
                <div class="grid-content bg-purple-dark" style="background: #e5e9f2;border-radius: 25px;color:#666666;text-align: center">
                    <span>共  {{count}}  台  仪  表     已  连  接  {{onLineCount}}  台</span>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="12" >
            <el-col :span="4" v-for="item in counters"  style="width: 250px">
                <el-card shadow="always" style = "text-align: center" >

                    <el-button v-if="item.online == 1" @click="goDetails(item.meterId, item.displayUpperRowVal, item.displayLowerRowVal,item.clearMode, item.displayAlarm1, item.displayAlarm2, item.suspendFlag, item.meterName)"   type="text">{{item.meterName}}</el-button>
                    <el-button v-if="item.online == 0" @click="goDetails(item.meterId, item.displayUpperRowVal, item.displayLowerRowVal,item.clearMode, item.displayAlarm1, item.displayAlarm2, item.suspendFlag, item.meterName)"   type="text" style="color:#999;">{{item.meterName}}</el-button>

                    <el-input :value="item.displayUpperRowVal"
                              :disabled="true">
                    </el-input>
                    <el-input
                            :value="item.displayLowerRowVal"
                            :disabled="true">
                    </el-input>
                    <div class="al1Div" >
                        <span class="al1DivP">AL1</span>
                        <button v-if="isShow(item.displayUpperRowVal, item.displayAlarm1) == true" class="alDivBtn"></button>
                        <button v-if="isShow(item.displayUpperRowVal, item.displayAlarm1) == false" class="alDivBtn1"></button>
                    </div>
                    <div class="al2Div" >
                        <span class="al1DivP">AL2</span>
                        <button v-if="isShow(item.displayLowerRowVal, item.displayAlarm2) == true" class="alDivBtn"></button>
                        <button v-if="isShow(item.displayLowerRowVal, item.displayAlarm2) == false" class="alDivBtn1"></button>
                    </div>
                    <div class="clearFloat"></div>
                </el-card>
            </el-col>
        </el-row>
        <div style="float: right;padding-top: 20px">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[12]"
                    :page-size="12"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</body>
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>-->
<script src="../../static/js/vue.js"></script>
<script src="../../static/js/index.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isCollapse: true,
            currentDate: new Date(),
            counters:[],
            pageNum: 1,
            pageSize : 12,
            count:1,
            onLineCount:0,
            num:0
        },
        created:function(){
            this.findAllCounters();
        },
        mounted: function() {
            var self = this;
            const timer = setInterval(function () {
                self.num = self.num + 1;
                console.log(self.num)
                self.findAllCounters();
            }, 2000)
        },
        methods: {
            isShow:function(val1, val2) {
                if (Number(val1) >= Number(val2)) {
                    return true;
                } else {
                    return false;
                }
            },
            findAllCounters: function() {
                var self = this;
                // 获取到所有的计数器
                axios.post('http://localhost:8032/device/allCounter',{pageNum: self.pageNum, pageSize : self.pageSize}).then(function (res) {
                    if (res.data.code == true) {
                        self.counters = res.data.data
                        self.count = res.data.count;
                        self.onLineCount = res.data.onLineCount;
                    } else {
                        self.$notify.error({
                            title: '温馨提示',
                            message: '计数器获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            },
            handleSizeChange: function(val) {
                console.log(val)
                var self = this;
                self.pageSize = val
                self.findAllCounters();
            },
            handleCurrentChange: function(val) {
                console.log(val)
                var self = this;
                self.pageNum = val
                self.findAllCounters();
            },
            goDetails:function (id, upperRow, lowerRow, clearMode, al1, al2, suspendFlag, meterName) {
                console.log("是否开启" +clearMode);
                window.location.href = "details.html?id=" + id
                    + '&upperRow=' + upperRow + "&lowerRow=" + lowerRow
                    + "&clearMode=" + clearMode + "&al1=" + al1
                    + "&al2=" +al2 + "&suspendFlag=" + suspendFlag + "&meterName=" + meterName;
            }
        }
    })
</script>
</html>